<template>
	<view class="bottomPage">
		<view class="botli" @click="goPage(1)" :class="suo == 0?'active':''">
			<view class="botImg" v-if="suo == 0">
				<image src="../static/lm1h.png" mode=""></image>
			</view>
			<view class="botImg" v-else>
				<view class="botImg">
					<image src="../static/lm1.png" mode=""></image>
				</view>
			</view>
			<text v-if="suo != 0">首页</text>
		</view>
		
		<view class="botli" @click="goPage(2)" :class="suo == 1?'active':''">
			<view class="botImg" v-if="suo == 1">
				<image src="../static/lm2h.png" mode=""></image>
			</view>
			<view class="botImg" v-else>
				<image src="../static/lm2.png" mode=""></image>
			</view>
			<text v-if="suo != 1">增值服务</text>
		</view>
		
		<view class="botli" @click="goPage(3)" :class="suo == 2?'active':''">
			<view class="botImg" v-if="suo == 2">
				<image src="../static/lm3h.png" mode=""></image>
			</view>
			
			<view class="botImg" v-else>
				<image src="../static/lm3.png" mode=""></image>
			</view>
			<text v-if="suo != 2">我的</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"bottom",
		props:{
			suo:{
				typeof: Number,
				default: 0
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			// 跳转页面
			goPage(type){
				// if(uni.getStorageSync('isLogout') == 1) {
				// 	return uni.$u.toast('请先登录！');
				// }
				if(type == 1) {
					uni.switchTab({
						url:'/pages/index/index'
					})
				} else if(type == 2){
					uni.switchTab({
						url:'/pages/increment/index'
					})
				} else if(type == 3){
					uni.switchTab({
						url:'/pages/mine/index'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.bottomPage{
	width:460rpx;height:126rpx;background-color:#fff;border-radius:64rpx;position: fixed;bottom:64rpx;
	left:32rpx;box-shadow: 0px 0px 30rpx 0px rgba(0, 0, 0, 0.07);@include flx;padding:0 108rpx;justify-content: space-between;
	
	.botli{
		margin-top:26rpx;display: flex;flex-direction: column;align-items: center;
		.botImg{
			image{
				width:48rpx;height:48rpx;display: block;
			}
		}
		text{
			display: block;@include baseFont(20rpx,#6E6C6C,24rpx);margin-top:6rpx;
		}
	}
	.active{
		image{
			width: 72rpx !important;;height:72rpx!important;
		}
	}
}
</style>